/**
 * @author kobe
 * @author Truexin
 * @date   16/05/31
 * @reviseDate  16/08/12
 */
import PullRefresh from '../components/mui/PullRefresh.js';
import NoData from '../components/NoData.js';

(function (lf, r) {
    var RC = r.createClass,
        ajax = lf.utils.ajax,
        doAction = lf.bridgeJs.doAction,
        getUrlParam = lf.utils.getUrlParam;
    
    // const ACTIVE = 'active',//1
    //     DONGTAI = 'icon-dongtai',//4
    //     ZIXUN = 'icon-zixun',//6
    //     NOTICE = 'notice';//2 , 3
    //    //5 是管理制度只会在oa出现。 
    
    let noticeType = getUrlParam('type');
    
    var NoticeList = RC({
        render: function () {
            var user = this.props.user,
                noData = this.props.noData;
            var notice_list = this.props.info.map(function (info) {
                return (
                    <List info={info} noticeId={info.id} user={user}/>
                )
            })
            if (noData) {
                if (noticeType == '1') {
                    var noData = {
                        span_text: '您的活动列表为空',
                    };
                } else if (noticeType == '4') {
                    var noData = {
                        span_text: '您的动态列表为空',
                    };
                } else if (noticeType == '6') {
                    var noData = {
                        span_text: '您的资讯列表为空',
                    };
                } else {
                    var noData = {
                        span_text: '您的通知列表为空',
                    };
                }
                
                return <NoData data={noData}/>
            } else {
                return (
                    <ul className="mui-table-view mui-table-view-striped mui-table-view-condensed">
                        {notice_list}
                    </ul>
                )
            }
            
        }
    })
    
    var List = RC({
        componentDidMount: function () {
            var toDetail = r.findDOMNode(this.refs.toDetail),
                me = this,
                user = me.props.user;
            
            $(toDetail).on('tap', function () {
                
                var btn = $(this);
                
                ajax({
                    type: "POST",
                    data: {
                        userType: user.householdType,
                        userId: user.id,
                        noticeId: me.props.noticeId
                    },
                    success: function (data) {
                        if (data.code == '200') {
                            
                            btn.find('.title').addClass('read');
                            btn.find('.watchNum').text(parseInt(btn.find('.watchNum').text()) + 1);
                            doAction('property-notice-intro.html?noticeId=' + me.props.noticeId, me.props.info.title);
                            
                        }
                        else {
                            alert(data.desc);
                        }
                    }
                    
                }, lf.finger.api.property.saveNoticeBrowse);
            })
        },
        render: function () {
            var info = this.props.info,
                type = "",
                publishTime = lf.utils.format(info.publishTime, 'yyyy-MM-dd hh:mm');
            switch (info.type) {
                case '2':
                    type = {
                        text: "提醒",
                        bgColor: "orangeBg"
                    };
                    break;
                case '3':
                    type = {
                        text: "通知",
                        bgColor: "redBg"
                    };
                    break;
            }
            
            return (
                
                <li className="mui-table-view-cell">
                    <a href="javascript:;" className="to-detail" ref="toDetail">
                        <div className="mui-table">
                            <div className="mui-table-cell mui-col-xs-10">
                                <h4 className={"mui-ellipsis title " + (info.readStatus == 1 ? "read" : '')}
                                    ref="title">{info.title}</h4>
                                <p className="mui-ellipsis info">
                                    <span className="date"><i className="iconfont date-icon"></i>{publishTime}</span>
                                    <span className="watch">
                                        <i className="iconfont watch-icon"></i>
                                        <span className="watchNum" ref="showWatchNum">{info.amount}</span>
                                    </span>
                                </p>
                            </div>
                            {
                                info.type == 2 || info.type == 3 ?
                                    <div className="mui-table-cell mui-col-xs-2 mui-text-right">
                                        <span className={"type "+type.bgColor}>{type.text}</span>
                                    </div> : ''
                            }
                        
                        </div>
                    </a>
                </li>
            
            )
        }
    })
    
    var Root = r.createClass({
        getInitialState: function () {
            return ({
                list: [],
                buildingId: '',
                page: '',
                noData: false
            })
        },
        getList: function (page, shouldAppend) {
            if (!page) page = 1;
            var me = this;
            
            me.setState({
                page: page
            });
            noticeType = noticeType == '2' ? noticeType + ',3' : noticeType;
            ajax({
                data: {
                    projectId: me.props.user.projectId,
                    groupId: me.state.buildingId,
                    userId: me.props.user.id,
                    page: page,
                    noticeType: noticeType,
                },
                success: function (data) {
                    if (data.code == '200') {
                        if (!data.dataList.length) {
                            me.setState({
                                noData: true,
                            })
                        } else {
                            let list = me.state.list;
                            let resultList = data.dataList;
                            $.each(resultList, function (i, item) { //关键地方,必须有两个参数,不然一个只能默认是下标了。
                                list.push(item);
                            });

                            mui('#pullrefresh')
                            .pullRefresh()
                            .endPullupToRefresh((list.length == data.maxCount)); //refresh completed

                            me.setState({
                                list: list,
                                noData: false
                            })
                        }
                    }
                    else {
                        alert(data.desc);
                    }
                }
            }, lf.finger.api.property.noticeList);
            
        },
        componentWillMount: function () {
            var me = this,
                user = this.props.user;
            ajax({
                type: "GET",
                data: {
                    houseId: user.houseId,
                },
                success: function (data) {
                    if (data.code == '200') {
                        var data = data.data;
                        me.setState({
                            buildingId: data.buildingId
                        });
                        
                        me.getList();
                        
                    }
                    else {
                        alert(data.desc);
                    }
                }
            }, lf.finger.api.household.getHouseInfo);
            
        },
        render: function () {
            return (
                <div className="property-notice container">
                    <NoticeList info={this.state.list} noData={this.state.noData} user={this.props.user}/>
                </div>
            )
        },
        componentWillReceiveProps: function (nextProps) {
            var page = nextProps.page;
            this.getList(page, true)
        }
    });
    
    var PullRefreshCon = React.createClass({
        getInitialState: function () {
            return {
                page: 1,
            }
        },
        pullupFn: function () {
            var newPage = ++this.state.page;
            this.setState({
                page: newPage
            });
        },
        render: function () {
            var me = this;
            return <PullRefresh pullupFn={me.pullupFn} data={<Root page={me.state.page} user={this.props.user}/>}/>;
        }
    });
    
    lf.appJs.getUser(function (user) {
        console.log(user)
        r.render(
            <PullRefreshCon user={user}/>,
            document.getElementById('root'), function () {
                $('#root').css('background', 'none');
            }
        )
    })
    
})(liefeng, React);
